import React, {useEffect} from 'react';
import {HomeNewStyle} from "../homeNew/style";
import HomeBanner from "../home/cpns/home-banner";
import SectionHeader from "../../components/sectionHeader";
import SectionRooms from "../../components/sectionRooms";
import {shallowEqual, useDispatch, useSelector} from "react-redux";
import {incr, changeHomeDataList, homeThreeThunk} from "@/store";
import {getHomeGoodPriceData} from "../../services/modules/home";

const HomeThree = () => {

    const {homeDataList, count, data} = useSelector((state) => {
        return {
            homeDataList: state.homeThree.list,
            data: state.homeThree.data,
            count: state.homeThree.count,
        }
    }, shallowEqual);

    const dispatch = useDispatch();
    useEffect(() => {
        getHomeGoodPriceData().then((data) => {
            dispatch(changeHomeDataList(data));
        })
    }, [dispatch])

    useEffect(() => {
        dispatch(homeThreeThunk())
    }, [dispatch])

    console.log('data', data)

    return (
        <HomeNewStyle>
            <button onClick={() => dispatch(incr())}>+1 {count} {data.title}</button>
            <HomeBanner/>
            <div className='content'>
                <div className='good-price'>
                    <SectionHeader title={homeDataList?.title}/>
                    <SectionRooms roomList={homeDataList?.list} />
                </div>
            </div>
        </HomeNewStyle>
    );
};

export default HomeThree;